<script lang="ts" setup>
import type { Ref } from 'vue';
import { address, modifyAdd } from '@/api/setup'
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import { showToast } from 'vant';
import { showSuccessToast, showFailToast } from 'vant';
import { useUserStore } from '@/stores/user'
const useStore = useUserStore()
const router = useRouter()

const chosenAddressId = ref('1');

const id = ref('')
const name = ref('')
const tel = ref('')
const add = ref('')


interface IList {
    id: string,
    name: string,
    tel: string,
    address: string,
    isDefault: boolean
}

const list: Ref<IList[]> = ref([])

const show = ref(false);
const onEdit = (item: any, index: string) => {
    // console.log(item)
    id.value = item.id
    name.value = item.name
    tel.value = item.tel
    add.value = item.address
    show.value = true;
};

onMounted(() => {
    address({ tel: useStore.username || '' }).then(res => {
        // console.log(res)
        list.value = res.data.data
        window.localStorage.setItem('addId', res.data.data.length)
    })
})


// 正则校验
const named = /^(?:[\u4e00-\u9fa5·]{2,16})$/
const teld = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/

function onSubmit() {
    if(!named.test(name.value)||!teld.test(tel.value)){
        return showFailToast('信息格式有误') 
    }
    modifyAdd({ id: id.value, name: name.value, tel: tel.value, address: add.value }).then(res => {
        // console.log(res)
        if (res.data.code !== '200') {
            return showFailToast(res.data.message)
        }

        showSuccessToast(res.data.message)
        show.value = false
        address({ tel: useStore.username || '' }).then(res => {
            list.value = res.data.data
            window.localStorage.setItem('addId', res.data.data.length)
        })
    })
}
</script>

<template>
    <van-nav-bar title="地址管理" left-text="返回" left-arrow @click-left="router.push('/setup/setuphome')" />
    <div class="boxset">
        <!-- 导航栏 -->

        <!-- 地址栏 -->
        <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认"
            @add="router.push('/setup/addressstep')" @edit="onEdit" />

        <!-- 圆角弹窗（底部） -->
        <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
            <template #default>
                <div>
                    <van-form @submit="onSubmit">
                        <van-cell-group inset>
                            <van-field v-model="name" name="用户名" label="用户名" placeholder="用户名"
                                :rules="[{ required: true, message: '请填写用户名' }]" />
                            <van-field v-model="tel" name="电话号码" label="电话号码" placeholder="电话号码"
                                :rules="[{ required: true, message: '请填写电话号码' }]" />
                            <van-field v-model="add" name="地址" label="地址" placeholder="地址"
                                :rules="[{ required: true, message: '请填写地址' }]" />
                        </van-cell-group>
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit">
                                确认修改
                            </van-button>
                        </div>
                    </van-form>
                </div>
            </template>
        </van-popup>
    </div>
</template>

<style lang="scss" scoped>
.van-nav-bar {
    background-color: #f7fdff;
}
</style>